<template>
	<view class="body-view">
		<!--导航和状态栏-->
		<view class="state-navigation">
			<view class="slim_header_navigation d-flex a-center j-center" >
				<view class="left_box" @tap="goBack">
					<image src="/static/center/back.png" class="back"></image>
				</view>
				<view class="title">食物榜单</view>
				<!-- <view class="right_box" @tap="openSt">
                    <view class="st_btn" v-if="VER.ver">声明与文献</view>
				</view> -->
			</view>
		</view>
		<!-- 顶部位置占位 -->
		<view style="height:calc(100rpx + var(--status-bar-height));"></view>
		<view class="top-search d-flex a-center">
			<view class="search-input d-flex a-center">
				<view class="input-icon d-flex a-center">
					<image
			            style="width: 30rpx; height: 30rpx"
			            src="/static/nvue/search.png"
			            mode=""
			        />
				</view>
			    <input class="inp" type="text" v-model="searchText" placeholder-style="color:#ccc" placeholder="搜索食物">
			    <i v-if="searchText" @tap="searchText=''" class="tmicon tmicon-times-circle-fill" style="color:#c4c4c4;"></i>
			</view>
		</view>
		<view class="classification d-flex">
			<view class="left-class">
				<scroll-view scroll-y="true" class="heights">
					<view v-for="(item,index) in pageData" class="class-cell d-flex a-center j-center">
						<view @tap="chooseClass(index)" :class="`${selectClass==index?'class-cell-true':'class-cell-false'}`">
							{{item.rankTypeName}}
						</view>
					</view>
					<view style="height: 40rpx;"></view>
				</scroll-view>
			</view>
			<view class="right-class">
				<scroll-view v-for="(item,index) in pageData" :key="item.id" v-show="!searchText&&index==selectClass" scroll-y="true" class="heights">
					<view v-for="(items,indexs) in item?.childNode" :key="items.id" @tap="goFoodDetail(items.code)" class="class-row d-flex">
						<view class="class-row-icon">
							<view v-if="indexs<3" class="row-fire d-flex j-center" style="padding-top:2rpx;margin-top: 25rpx;">
								<text class="row-fire-text" style="color: #FFFFFF;">{{indexs + 1}}</text>
								<image class="row-fire-image" src="@/static/image/food-ranking.png"></image>
							</view>
							<view v-else class="row-fire d-flex a-center j-center" style="margin-top: 23rpx;">
								<text class="row-fire-text" style="color: #999999;font-size: 24rpx;">{{indexs + 1}}</text>
							</view>
						</view>
						<view class="class-row-content">
							<view class="row-name d-flex a-center">
								<view class="row-name-text">{{items.name}}</view>
								<view v-if="items.nutrient=='calcium'&&items.nutrientValue!=''" class="row-name-describe">钙{{items.nutrientValue}}g</view>
								<view v-if="items.nutrient=='cellulose'&&items.nutrientValue!=''" class="row-name-describe">纤维素{{items.nutrientValue}}g</view>
								<view v-if="items.nutrient=='gi'&&items.nutrientValue!=''" class="row-name-describe">{{items.nutrientValue}}</view>
								<view v-if="items.nutrient=='gl'&&items.nutrientValue!=''" class="row-name-describe">{{items.nutrientValue}}</view>
								<view v-if="items.nutrient=='protein'&&items.nutrientValue!=''" class="row-name-describe">蛋白质{{items.nutrientValue}}g</view>
							</view>
							<view class="row-consume d-flex">
								<text>{{items.heat}}千卡/</text>
								<text v-if="items.rankTypeName=='饮品'">100ml</text>
								<text v-else>100g</text>
							</view>
						</view>
						<view class="class-row-check d-flex a-center j-end">
							<i class="icon icon-more-2" style="color: #CCCCCC;font-size: 20rpx;"></i>
						</view>
					</view>
					<view style="height: 40rpx;"></view>
				</scroll-view>
				<scroll-view v-show="searchText" scroll-y="true" class="heights">
					<view v-for="items in search_childNode" :key="'search'+items.id" @tap="goFoodDetail(items.code)" class="class-row d-flex">
						<view class="class-row-icon">
							<view v-if="items.sort<=3" class="row-fire d-flex j-center" style="padding-top:2rpx;margin-top: 25rpx;">
								<text class="row-fire-text" style="color: #FFFFFF;">{{items.sort}}</text>
								<image class="row-fire-image" src="@/static/image/food-ranking.png"></image>
							</view>
							<view v-else class="row-fire d-flex a-center j-center" style="width: auto;margin-top: 23rpx;">
								<text class="row-fire-text" style="color: #999999;font-size: 24rpx;">{{items.sort}}</text>
							</view>
						</view>
						<view class="class-row-content">
							<!--
							<view class="row-name">{{items.name}}</view>
							-->
							<view class="row-name d-flex a-center">
								<rich-text :nodes="items.nodes"></rich-text>
								<view v-if="items.nutrient=='calcium'&&items.nutrientValue!=''" class="row-name-describe">钙{{items.nutrientValue}}g</view>
								<view v-if="items.nutrient=='cellulose'&&items.nutrientValue!=''" class="row-name-describe">纤维素{{items.nutrientValue}}g</view>
								<view v-if="items.nutrient=='gi'&&items.nutrientValue!=''" class="row-name-describe">{{items.nutrientValue}}</view>
								<view v-if="items.nutrient=='gl'&&items.nutrientValue!=''" class="row-name-describe">{{items.nutrientValue}}</view>
								<view v-if="items.nutrient=='protein'&&items.nutrientValue!=''" class="row-name-describe">蛋白质{{items.nutrientValue}}g</view>
							</view>
							<view class="row-consume d-flex">
								<text>{{items.heat}}千卡/</text>
								<text v-if="items.rankTypeName=='饮品'">100ml</text>
								<text v-else>100g</text>
							</view>
						</view>
						<view class="class-row-check d-flex a-center j-end">
							<i class="icon icon-more-2" style="color: #CCCCCC;font-size: 20rpx;"></i>
						</view>
					</view>
					<view style="height: 40rpx;"></view>
				</scroll-view>
			</view>
		</view>
	</view>

    <statement ref="stPopup"></statement>
</template>

<script setup lang="tsx">
import { ref,watch } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getFoodRank } from "@/api/api";
import statement from "@/components/statement.vue";
import { ver } from "@/store/ver";
const VER = ver();
const stPopup = ref(null);
const openSt = ()=>{
    stPopup.value.open();
}


const goBack = () => {
	uni.navigateBack();
};
let dataList:any = [];
const pageData = ref();
onLoad(()=>{
	getFoodRank().then((res:any) => {
		if(res.success){
			dataList = res.data;
			let uniqueRanks = [...new Set(res.data.map((item:any) => `${item.rankTypeName}$${item.rankType}`))].map((item:any) => {  
			  return { rankTypeName: item.split('$')[0], rankType: parseInt(item.split('$')[1]) }  
			}); 
			uniqueRanks.forEach((item:any) => {
				item.childNode = res.data.filter((items:any) => items.rankType === item.rankType);
			});
			pageData.value = uniqueRanks;
			console.log(uniqueRanks)
		}
	});
});
const selectClass = ref(0)//选中的分类
//切换选择的分类
const chooseClass = (index:number) =>{
    if(selectClass.value!==index){
        searchText.value = '';
    }
	selectClass.value = index;
}
/*--------搜索----------------------------------------------------------------------------------------*/
const searchText = ref('');
const search_childNode:any = ref([]);
watch(searchText, (newVal: any, oldVal: any) => {
    let str = newVal.trim();
    if (!str) {
        str = "";
        search_childNode.value = [];
        return
    }

    SearchFood();
});
const SearchFood = async() => {
	let result = dataList.filter((item:any) => item.name.includes(searchText.value));  
    search_childNode.value = matchTextHighLight(result);
};
const matchTextHighLight = (arr:any) => {
    const reg = new RegExp(searchText.value, "gi");
    return arr.map((item:any) => {
        const obj = {
            ...item,
        };
        // const str = `<div style="color:#555;">${item.profile.nick}</div>`;
        const str = item.name;
		//console.log(str)
        const nodes = `<div style="color:#333;font-size:30rpx;font-weight:400;">${str.replace(
            reg,
            (s: any) => {
                return `<span style="color:#23e2a6;font-size:30rpx;font-weight:400;">${s}</span>`;
            }
        )}</div>`;
        obj.nodes = nodes;
		//console.log(searchText.value)
        return obj;
    });
};
const goFoodDetail = (code:string) => {
	uni.navigateTo({
		url:`/pages/dietMenu/foodDetail?code=${code}`
	});
}
</script>

<style lang="scss" scoped>
@import './foodRanking.scss';
</style>